<template>
  <div>
  <!-- order_card  -->
  <van-cell-group class="order_card">
      <van-cell class="order_id">
        <template #title>
          <span class="title">外卖订单:{{orderList.order_id}}</span>
        </template>
        <template #value>
          <span class="order_time">{{orderList.order_time}}</span>
        </template>
      </van-cell>

      <div class="order_content"  >
        <div class="goods" v-for="item of orderList.children " :key="item.name" >
          <div class="good_name">
            <span class="title">{{item.goods_name}}</span>
            <span class="label"> {{item.order_remarks}} </span>
          </div>
          <div class="good_num">
            <span>x{{item.goods_num}}</span>
          </div>
          <div class="good_price">
            <span class="price">¥{{item.goods_price *item.goods_num}}</span>
          </div>
        </div>

        <div class="good_delivery">
          <div class="name">配送费</div>
          <div class="price">¥{{orderList.order_delivery}}</div>
        </div>
        <div class="good_wallet">
          <div class="name">使用咖啡钱包</div>
          <div class="price">-￥{{orderList.goods_coffee_wallet}}</div>
        </div>
      </div>
      <van-cell class="good_mix">
        <template #title> <span>共{{orderList.children.length}}件商品</span> </template>
        <template #value>
          <div class="good_price">
            <span>实付</span> <span class="price">￥{{allPrice-orderList.order_delivery-orderList.goods_coffee_wallet}}</span>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
const props =defineProps({
  orderList: {
    order_id: {
      type: String,
      required: true,
    },
    goods_name: {
      type: String,
      required: true,
    },
    goods_price: {
      type: Number,
      required: true,
    },
    // 配送费
    goods_delivery: {
      type: Number,
      required: true,
    },
    // 咖啡钱包
    goods_coffee_wallet: {
      type: Number,
      required: true,
    },
    // 订单备注
    order_remarks: {
      type: String,
      required: true,
    },
    // 下单时间
    order_time: {
      type: String,
      required: true,
    },
  },
})
const {orderList} =props
const allPrice=computed(()=>{
  let allPriceNum=0;
   orderList.children.forEach(i => {
    allPriceNum+= parseInt(i.goods_price*i.goods_num)
  });
  return allPriceNum
})
</script>

<style lang="scss" scoped>

.order_card {
  margin-top: 0.35rem;
  // 订单编号
  .order_id {
    .title {
      color: grey;
      font-size: 0.35rem;
    }
    .order_time {
      color: grey;
      font-size: 0.35rem;
    }
  }
  // 订单内容
  .order_content {
    box-sizing: border-box;
    padding: 0.4rem;
    padding-bottom: 0;

    .goods {
      display: flex;
      justify-content: space-between;

      position: relative;
      margin-bottom: .3rem;
      .good_name {
        font-size: 0.45rem;
        .title {
          font-weight: bold;
          display: block;
        }
        .label {
          font-size: 0.3rem;
        }
      }
      .good_num {
        font-size: 0.37rem;
        position: absolute;
        right: 1.8rem;
        top: 0.4rem;
        color: grey;
      }
      .good_price {
        font-size: 0.42rem;
        line-height: 1.2rem;
      }
    }
    .good_delivery {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      .name {
        font-size: 0.4rem;
      }
      .price {
        font-size: 0.42rem;
      }
    }
    .good_wallet {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      box-sizing: border-box;
      padding-bottom: 0.3rem;
      border-bottom: 0.0325rem solid rgb(237, 236, 236);
      .name {
        font-size: 0.4rem;
        color: rgba(144, 192, 239, 1);
        cursor: pointer;
      }
      .price {
        font-size: 0.42rem;
        color: rgba(144, 192, 239, 1);
        cursor: pointer;
      }
    }
  }
  //   商品总计
  .good_mix {
    font-size: 0.4rem;
    .good_price {
      color: black;
      .price {
        font-size: 0.5rem;
      }
    }
  }
}
</style>